<script  setup>
import { reactive, ref } from "vue";
// import { ElForm, ElFormItem, ElButton, ElCol, ElInput } from "element-plus";
const size = ref("default");
const labelPosition = ref("right");

const sizeForm = reactive({
  name: "",
  password: ""
});

function onSubmit() {
  console.log("submit!");
}
</script>

<template>
<div class="login-main"> 
    <el-form
    ref="form"
    style="max-width: 600px"
    :model="sizeForm"
    label-width="auto"
    :label-position="labelPosition"
    :size="size"
    class="form"
  >
    <el-form-item label="账号">
      <el-input v-model="sizeForm.name" />
    </el-form-item>
        <el-form-item  label="密码">
      <el-input type="password" v-model="sizeForm.password" />
    </el-form-item>
    <el-form-item >
      <el-button type="primary" @click="onSubmit">登录</el-button>
      <el-button>注册</el-button>
    </el-form-item>
  </el-form>
</div>
</template>



<style>
.el-radio-group {
  margin-right: 12px;
}
.login-main {
  width: 100%;
  display: flex;
  justify-items: center;
}
.form {
  margin: 200px auto;
   border:1px #409eff solid ;
   padding: 20px;
   border-radius: 10px;
}
</style>
